<template>
	<view class="dataSet">
		<comHead :title="$t('grzx.sjgl')" :isLeft="true" :isRight="false"></comHead>
		<view class="list">
			<view class="item">
				<view class="title">
					<view class="l">
						<text>{{$t('grzx.WIFI')}}</text>
					</view>
					<view class="r">
						<switch checked="true" color="#0f9dfe" />
					</view>
				</view>
				<radio-group name="" @change="topRadioChange">
					<label>
						<text>{{$t('grzx.10j')}}</text>
						<radio :value="'1'" />
						<image :src="topChangeImage(1)" mode=""></image>
					</label>
					<label>
						<text>{{$t('grzx.20j')}}</text>
						<radio :value="'2'" />
						<image :src="topChangeImage(2)" mode=""></image>
					</label>
					<label>
						<text>{{$t('grzx.30j')}}</text>
						<radio :value="'3'" />
						<image :src="topChangeImage(3)" mode=""></image>
					</label>
					<label>
						<text>{{$t('grzx.qb')}}</text>
						<radio :value="'4'" />
						<image :src="topChangeImage(4)" mode=""></image>
					</label>
				</radio-group>
			</view>
			<view class="item">
				<view class="title">
					<view class="l">
						<text>{{$t('grzx.llhc')}}</text>
						<text>{{$t('grzx.fWIFI')}}</text>
					</view>
					<view class="r">
						<switch checked="true" color=" #0f9dfe" />
					</view>
				</view>

				<radio-group name="" @change="bottomRadioChange">
					<label>
						<text>{{$t('grzx.10j')}}</text>
						<radio :value="'1'" />
						<image :src="bottomChangeImage(1)" mode=""></image>
					</label>
					<label>
						<text>{{$t('grzx.20j')}}</text>
						<radio :value="'2'" />
						<image :src="bottomChangeImage(2)" mode=""></image>
					</label>
					<label>
						<text>{{$t('grzx.30j')}}</text>
						<radio :value="'3'" />
						<image :src="bottomChangeImage(3)" mode=""></image>
					</label>
					<label>
						<text>{{$t('grzx.qb')}}</text>
						<radio :value="'4'" />
						<image :src="bottomChangeImage(4)" mode=""></image>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="btn">
			<text>{{$t('grzx.qkhc')}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topRadioVal: '1',
				bottomRadioVal: '1'
			}
		},
		methods: {
			topRadioChange(e) {
				const selectedValue = e.detail.value;
				this.topRadioVal = selectedValue;
			},
			bottomRadioChange(e) {
				const selectedValue = e.detail.value;
				this.bottomRadioVal = selectedValue;
			},
			topChangeImage(n) {
				if (n == this.topRadioVal) {
					return 'https://siha.vxmeng.com/static/my/selected.png';
				} else {
					return 'https://siha.vxmeng.com/static/my/no-selected.png';
				}
			},
			bottomChangeImage(n) {
				if (n == this.bottomRadioVal) {
					return 'https://siha.vxmeng.com/static/my/selected.png';
				} else {
					return 'https://siha.vxmeng.com/static/my/no-selected.png';
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.dataSet {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;

		.tit {
			display: inline-flex;
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			color: rgba(255, 255, 255, 0.5451);
		}

		.list {
			padding: 30rpx;
			padding-bottom: 0;
			box-sizing: border-box;
			width: 100%;
			// height: calc(100vh - 320rpx);
			overflow: auto;

			.item {
				padding: 10rpx 30rpx;
				margin-bottom: 20rpx;
				box-sizing: border-box;
				// display: flex;
				// justify-content: space-between;
				// align-items: center;
				// background: linear-gradient(to right bottom, rgba(28, 25, 28), rgba(18, 18, 30));
				background: linear-gradient(128deg, rgba(34, 34, 34, 0.3) 0%, rgba(30, 36, 44, 0.35) 102%);
				border-radius: 30rpx;

				.title {
					display: flex;
					justify-content: space-between;
					align-items: ceneter;
					padding: 16rpx 0;
				}

				.l {
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 20rpx;
					// padding-bottom: 16rpx;

					text {
						color: #fff;
						font-size: 32rpx;

						&:nth-child(2) {
							color: #999;
							font-size: 24rpx;
							margin-top: 16rpx;
						}
					}
				}

				.r {
					switch {
						transform: scale(0.7);
						transform-origin: 100% 50%;
					}
				}

				radio-group {
					display: flex;
					flex-direction: column;
					width: 100%;

					/deep/uni-radio .uni-radio-input {
						width: 40rpx;
						height: 40rpx;
						background: none !important;
					}

					label {
						padding: 20rpx 0;
						border-top: 1rpx solid rgba(#FFFFFF, 0.1);
						display: flex;
						justify-content: space-between;
						align-items: center;
						position: relative;

						text {
							color: #fff;
							// font-size: 24rpx;
							margin-left: 20rpx;
						}

						image {
							position: absolute;
							width: 32rpx;
							height: 32rpx;
							right: 20rpx;
							top: 28rpx;
						}

						radio {
							visibility: hidden;
						}
					}
				}
			}
		}

		.btn {
			width: 690rpx;
			height: 104rpx;
			border-radius: 16rpx;
			// background: linear-gradient(to right bottom, rgba(24, 23, 28, .6), rgba(18, 18, 30));
			background: linear-gradient(128deg, rgba(34, 34, 34, 0.3) 0%, rgba(30, 36, 44, 0.35) 102%);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			color: #D8D8D8;
		}
	}
</style>